/* 自定义滑动条样式 */
.scroll-bar {
  &::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0);
    border-left: 1px solid rgba(0, 0, 0, 0);
  }

  &::-webkit-scrollbar {
    width: 5px;
    height: 6px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    min-height: 28px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
}

/* 为Element UI滚动条添加样式 */
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}

.el-scrollbar__bar {
  opacity: 1 !important;
  transition: opacity 0.3s;
}

.el-scrollbar__bar.is-vertical {
  width: 6px;
}

.el-scrollbar__bar.is-horizontal {
  height: 6px;
}

.el-scrollbar__thumb {
  background-color: rgba(144, 147, 153, 0.3);

  &:hover {
    background-color: rgba(144, 147, 153, 0.5);
  }
}

/* 确保主内容区域可滚动 */
.main-content .el-scrollbar__wrap {
  overflow-y: auto !important;
}